<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .ecope_switchable{ width:500px; height:313px; position:relative; margin-left:20px; }
.ecope_switchable .sc_container{ width:500px; height:313px; position:relative; overflow:hidden; }
.ecope_switchable .sc_container ul{ width:500px; height:313px; }
.ecope_switchable li{ width:500px; height:313px; overflow:hidden; }
.ecope_switchable .sc_index{ position:absolute; right:12px; bottom:12px; z-index:3; }
.ecope_switchable .sc_index a{ float:left; width:30px; height:7px; line-height:7px; margin-left:2px; background:#fff; opacity:0.7; filter:alpha(opacity=70); cursor:pointer; text-indent:-999em; overflow:hidden; }
.ecope_switchable .sc_index .current{ background-color:#3498f0; opacity:1; filter:alpha(opacity=100); }
.ecope_switchable .sc_prev,
.ecope_switchable .sc_next{ position:absolute; top:50%; margin-top:-29px; display:block; width:40px; height:58px; background:url(../images/arrow.png) no-repeat 0 0; text-indent:-999em; overflow:hidden; opacity:0.5; filter:alpha(opacity=50); border:2px solid #555; }
.ecope_switchable .sc_prev{ left:10px; }
.ecope_switchable .sc_next{ right:10px; background-position:-46px 0; }
.ecope_switchable .sc_prev:hover,
.ecope_switchable .sc_next:hover{ opacity:0.8; filter:alpha(opacity=80); }

  </style>
</head>
<body>
  <script src="./javascripts/switchable.js"></script>
  <div class="ecope_switchable">
    <div class="sc_container">
        <ul>
            <li>面板一</li>
            <li>面板二</li>
            <li>面板三</li>
            <li>面板四</li>
        </ul>
    </div>
    
        <!-- 如果要自定义上一组、下一组的切换按钮
        可以先将按钮的结构写好，否则组件会自动生成
        该按钮的结构 -->
    <a href="#" class="sc_prev">Previous</a>
    <a href="#" class="sc_next">Next</a>
     
</div>
</body>
</html>